<template>
  <el-main width="220px" class="image-main" v-loading="loading">
    <div class="top p-3">
      <!-- <div v-for="(item,index) in list" :key="index">{{ item.url }}</div>-->
      <el-row :gutter="20">
        <el-col
          :span="6"
          :offset="0"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-card
            shadow="hover"
            class="relative mb-3"
            :body-style="{ padding: 0 }"
          >
            <el-image
              :src="item.url"
              fit="cover"
              class="h-[150px]"
              style="width: 100%"
              :preview-src-list="[item.url]"
              :initial-index="0"
            ></el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="flex justify-center items-center">
              <el-button type="primary" size="small" @click="reSetName(item)"
                >重命名</el-button
              >

              <!--  -->
              <el-popconfirm
                title="是否要删除该图片？"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteName(item.id)"
              >
                <template #reference>
                  <el-button type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="bottom">
      <el-pagination
        background
        layout="prev,pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
  </el-main>
  
  <el-drawer v-model="drawer" title="上传图片"  >
   <uploadfile :data="{ image_class_id }" @success="rel"></uploadfile>
  </el-drawer>
</template>
  <script setup>
import { ref } from "vue";
import { getImage, setImageName, deleteImage } from "../api/image";
import { showPrompt } from "@/composables/util.js";
import { Notify } from "@/composables/util.js";
import uploadfile from '@/components/uploadFile.vue'
const drawer =ref(false)
const currentPage = ref(1);
const total = ref(0);
const limit = ref(10);
const list = ref([]);
const loading = ref(false);
const image_class_id = ref(0);

// 重命名
const reSetName = (data) => {
  console.log(data);
  showPrompt("重命名", data.name).then(({ value }) => {
    console.log(value);
    loading.value = true;
    setImageName(data.id, value)
      .then((res) => {
        Notify("修改成功");

        getData();
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

function getData(p = null) {
  if (typeof p == "number") {
    currentPage.value = p;
  }

  // console.log(p);
  loading.value = true;
  getImage(image_class_id.value, currentPage.value)
    .then((res) => {
      // console.log('11112',res)
      total.value = res.totalCount;
      list.value = res.list;
      console.log(list.value);
    })
    .finally((res) => {
      loading.value = false;
    });
}
const rel=()=>{
  getData(1);
}

// 根据分类id重新加载分类列表
const loadData = (id) => {
  currentPage.value = 1;
  image_class_id.value = id;
  getData();
};
// 删除图片
const deleteName = (id) => {
  loading.value = true;
  console.log(id);
  deleteImage([id])
    .then((res) => {
      console.log(res);
      Notify("删除成功");
      getData();
    })
    .finally((res) => {
      loading.value = false;
    });
};



const upload=()=>{
  drawer.value=true

}
defineExpose({
  loadData,
  upload
});
</script>
 <style lang="scss" scoped>
.image-main {
  position: relative;
  height: 100%;
  .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
  }
}

.image-title {
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>